<!--
 * @Author: your name
 * @Date: 2020-04-15 23:06:15
 * @LastEditTime: 2020-11-02 23:10:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cloudEdu\src\views\courseware\index.vue
 -->
<template>
  <div class="courseware page-exp">
    <pageHeader></pageHeader>
    <div class="search-main">
      <div class="search-header">
        <div class="search-form">
          <el-input v-model="search_content" class="search-form-ipt" value="content" size="medium" placeholder="请输入内容"></el-input>
          <el-button class="search-form-btn" type="primary" @click="getAllCourseware(1)" size="medium">搜索</el-button>
        </div>
      </div>
      <div class="js-header-placeholder"></div>
      <div class="search-body">
        <div class="search-classify">
          <div class="all-content-result">全站结果</div>
          <div class="search-result">{{ courses.length }}条结果</div>
        </div>
        <div class="search-course-list" v-if="courses.length > 0">
          <div class="search-item" v-for="course in courses" :key="course.coursewareId">
            <div class="item-img">
              <img :src="course.photo" @click="searchTocourse(course.coursewareId)" width="290" height="220" />
            </div>
            <div class="item-detail">
              <div class="item-title" @click="searchTocourse(course.coursewareId)" v-html="course.name"></div>
              <div class="item-intro" v-html="course.introduction"></div>
              <div class="item-other">
                <div>{{ course.firstTag }}</div>
                <div>{{ course.secondTag }}</div>
                <div>{{ course.videoTime }}</div>
                <div>{{ course.collectionNum }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="courses.length == 0" class="noData">暂无数据</div>
        <el-pagination
          class="pagination"
          v-if="courses.length > 0"
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="total, prev, pager, next"
          :total="pagination.total"
        ></el-pagination>
      </div>
    </div>
    <pageFooter></pageFooter>
  </div>
</template>
<script>
import pageHeader from "@/components/PageHeader.vue";
import pageFooter from "@/components/PageFooter.vue";
const sha256 = require("js-sha256").sha256;
export default {
  components: {
    pageHeader,
    pageFooter
  },
  created() {},
  mounted() {
    this.init();
  },
  data() {
    return {
      courseList: [],
      pagination: {
        page: "1",
        limit: 12,
        total: 0
      },
      courses: [],
      total: 0,
      search_content: ""
    };
  },
  methods: {
    init() {
      //获取课件列表
      this.getAllCourseware();
    },
    getAllCourseware(param) {
      let _this = this;
      let content = "";
      if (param) {
        content = this.search_content;
      } else {
        content = _this.$route.query.words;
      }
      //let param = _this.$route.query.words;
      // let param = _this.search_content;
      // this.search_content = this.$route.query.words;
      let time = new Date().valueOf();
      _this
        .$http({
          url: "/wisdomlearn/courseware/selectAllCourseware",
          method: "post",
          headers: {
            accessToken: _this.config.token,
            appId: "appid-xinyun-0003",
            userId: JSON.parse(_this.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: _this.tool.sign("/wisdomlearn/courseware/selectAllCourseware", time),
            timestamp: time
          },
          data: {
            orderType: "all",
            pageIndex: _this.pagination.page,
            pageSize: "12",
            name: content
          }
        })
        .then(res => {
          if (res && res.retCode == "00000") {
            let courses = res.data.list;
            for (let course of courses) {
              course["photo"] = this.config.imgPath + course["photo"];
            }
            _this.courses = courses;
            this.pagination.total = courses.length;
            //根据关键字过滤
            //_this.search();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    search() {
      let param = this.search_content;
      let courses = [];
      for (let course of this.courseList) {
        let name = course["name"];
        let introduction = course["introduction"];
        if (name.search(param) != -1 || introduction.search(param) != -1) {
          course["name"] = name.replace(param, "<span class='font-focus'>" + param + "</span>");
          course["introduction"] = introduction.replace(param, "<span class='font-focus'>" + param + "</span>");
          courses.push(course);
        }
      }
      this.courses = courses;
      this.pagination.total = courses.length;
    },
    handleCurrentChange(val) {},
    handleSizeChange(val) {},
    searchTocourse(param) {
      this.$router.push({
        name: "courseware-courseWareDetail",
        query: { id: param }
      });
    }
  }
};
</script>
<style>
.font-focus {
  color: red;
}
.search-form-ipt {
  color: #93999f;
  font-size: 16px;
  line-height: 48px;
}
.search-form-ipt input {
  height: 47px !important;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.search-classify {
  display: flex;
}
.search-form-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-top: 1.4px;
  height: 48px;
  width: 140px;
  font-size: 16px;
  cursor: pointer;
}

.js-header-placeholder {
  height: 88px;
  display: none;
}
.search-main {
  width: 100%;
  flex: 1;
}
.search-main .search-header {
  height: 88px;
  width: 100%;
  padding-top: 24px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(28, 31, 33, 0.06);
}
.search-main .search-header .search-form {
  height: 48px;
  width: 840px;
  margin: 0 auto;
  display: flex;
}
.search-item {
  width: 1036px;
  margin: 0 auto;
  background: #fff;
  padding-top: 16px;
  padding-bottom: 16px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(43, 51, 59, 0.1);
  line-height: 1;
  display: flex;
}
.search-classify {
  width: 1036px;
  margin: 0 auto;
}
.all-content-result {
  color: #333;
  font-size: 26px;
  flex: 1;
}
.search-result {
  color: gray;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-other {
  display: flex;
}
.item-detail {
  font-size: 26px;
  margin: 20px;
}
.item-title {
  margin-top: 10px;
  height: 20%;
}
.item-intro {
  margin-top: 20px;
  font-size: 20px;
  height: 32%;
  color: #4d555d;
}
.item-other {
  margin-top: 20px;
  font-size: 20px;
  height: 20%;
  color: #4d555d;
}
.item-other div {
  margin-right: 30px;
}
.item-img,
.item-title {
  cursor: pointer;
}
.pagination {
  padding-bottom: 20px;
  padding-top: 20px;
}
</style>
